<template>
  <div class="comp-navbar">
    <!-- 占位栏 -->
    <cover-view
      class="placeholder-bar"
      :style="{height: navBarHeight + 'px'}"
    ></cover-view>
    <!-- 导航栏主体 -->
    <cover-view
      class="navbar"
      :style="{height: navBarHeight + 'px',backgroundColor:navBackgroundColor}"
    >
      <!-- 状态栏 -->
      <cover-view
        class="nav-statusbar"
        :style="{height: statusBarHeight + 'px'}"
      ></cover-view>
      <!-- 标题栏 -->
      <cover-view
        class="nav-titlebar"
        :style="{height: titleBarHeight + 'px'}"
      >
        <!-- 后退键 -->
        <cover-view
          v-if="backVisible"
          class="opt opt-back"
          @click="backClick()"
        >
          <van-icon name="arrow-left" />
        </cover-view>
        <!-- home键 -->
        <cover-view
          v-if="homeIshide"
          class="opt opt-home"
          @click="homeClick()"
        >
          <cover-image
            class="home-image"
            src="../../static/images/user.png"
          ></cover-image>
        </cover-view>
        <!-- 标题 -->
        <cover-view
          class="bar-title"
          :style="[{color:titleColor}]"
        >{{title}}</cover-view>
      </cover-view>
    </cover-view>
  </div>
</template>

<script>
export default {
  props: {
    // 导航栏背景色
    navBackgroundColor: {
      default: '#ffffff'
    },
    // 标题颜色
    titleColor: {
      default: '#FFFFFF'
    },
    // 标题文字
    title: {
      required: false,
      default: '来画大世界'
    },
    // 是否显示后退按钮
    backVisible: {
      type: Boolean,
      default: false
    },
    // home按钮的路径
    homePath: {
      type: String,
      default: '/pages/index/main'
    },
    backPath: {
      type: String,
      default: '/pages/index/main'
    },
    homeIshide: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      statusBarHeight: '', // 状态栏高度
      titleBarHeight: '', // 标题栏高度
      navBarHeight: '', // 导航栏总高度
      platform: '',
      model: '',
      brand: '',
      system: ''
    }
  },
  beforeMount () {
    const self = this
    wx.getSystemInfo({
      success (system) {
        self.statusBarHeight = system.statusBarHeight
        self.platform = system.platform
        self.model = system.model
        self.brand = system.brand
        self.system = system.system
        let platformReg = /ios/i
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44
        } else {
          self.titleBarHeight = 48
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight
      }
    })
  },
  mounted () {
    // console.log(`this.backVisible:`, this.backVisible);
  },
  methods: {
    backClick () {
      wx.navigateBack({
        delta: 1
      })
    },
    homeClick () {
      wx.reLaunch({
        url: this.homePath
      })
    }
  }
}
</script>

<style lang="less" scoped>
.comp-navbar {
  width: 100vw;
  z-index: 999;
  .navbar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    .nav-titlebar {
      display: flex;
      align-items: center;
      position: relative;
      padding: 0 15px;
      .opt {
        width: 50rpx;
        height: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
      }
      .opt-back {
        .back-image {
          width: 25rpx;
          height: 25rpx;
        }
      }
      .opt-home {
        .home-image {
          width: 50rpx;
          height: 50rpx;
        }
      }
      .bar-options {
        width: 135rpx;
        height: 60rpx;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-around;
        position: absolute;
        left: 7px;
        display: flex;
        align-items: center;
        border-radius: 27px;
        padding-right: 5rpx;

        .line {
          display: block;
          height: 30rpx;
          width: 1px;
          background-color: gray;
        }
      }
      .bar-title {
        flex: 1;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .placeholder-bar {
    width: 100%;
  }
}
</style>
